<template>
    <div class="">
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <el-form-item label="选择分类：">
                <el-select v-model="submitJson.topCategoryId"
                           :disabled="certificationstatus != 2"
                           placeholder="请选择一级分类"
                           @change="topchange()"
                           clearable>
                    <el-option v-for="(item,index) in category"
                               :key="index"
                               :label="item.topcategoryname"
                               :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-select v-model="submitJson.twoCategoryId"
                           placeholder="请选择二级分类"
                           :disabled="certificationstatus != 2"
                           clearable
                           @change="secondchange()">
                    <el-option v-for="(item,index) in busCommoditySecondaryCategoryList"
                               :key="index"
                               :label="item.topcategoryname"
                               :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="submitJson.threeCategoryId"
                           placeholder="请选择三级分类"
                           :disabled="certificationstatus != 2"
                           clearable
                           @change="threechange()">
                    <el-option v-for="(item,index) in busCommodityThirdCategoryList"
                               :key="index"
                               :label="item.topcategoryname"
                               :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-form :inline="false"
                 class="query-form"
                 size="small"
                 :loading="loading">
            <el-form-item v-for="(item,index) in submitJson.templateFromList" :key="index">
                <h3>{{item.name}}</h3>
                <ul class="projectType" v-for="(val,key) in item.templateItemFormList" :key="key">
                    <li v-if="val.fieldtype == '文字'">
                        <span style="color:#f56c6c;position: absolute;left: 0;" v-if="!val.ismust">*</span>
                        <el-input size="medium" :disabled="certificationstatus != 2" :placeholder="'请填写'+val.fieldname" v-model="val.fieldvalue">
                            <span style="display: block;text-align: right;" slot="prepend">{{val.fieldname}}</span>
                        </el-input>
                    </li>
                    <li class="imgBox" v-if="val.fieldtype == '图片'">
                        <span style="color:#f56c6c;position: absolute;left: 0;" v-if="!val.ismust">*</span>
                        <span :style="{bottom: !showImgName && !val.fieldvalue? 0 + 'px' : 20 +'px'}" class="imgName">{{val.fieldname}}</span>
                        <el-upload
                            v-if="certificationstatus == 2"
                            :action="uploadUrl"
                            :limit='1'
                            :on-change="(file)=> handleChange(index,key, file)"
                            list-type="picture-card"
                            :on-success="(response, file,fileList)=> handleSuccess(index,key, response, file,fileList)"
                            :on-remove="(file,fileList)=> handlePicRemove(index,key, file, fileList)"
                            :file-list="uploadData"
                        ><i class="el-icon-plus"></i>
                        </el-upload>
                        <el-popover v-else
                                    placement="right"
                                    trigger="click">
                            <img :src="val.fieldvalue"
                                 style="max-width:1000px;max-height: 90vh;border-radius:3px;">
                            <div slot="reference"
                                 class="imgBox">
                                <img :src="val.fieldvalue" style="width:148px;height:auto;">
                                <p @click.stop>{{val.fieldname}}</p>
                            </div>
                        </el-popover>
                    </li>
                    <li v-if="val.fieldtype == '数字'">
                        <span style="color:#f56c6c;position: absolute;left: 0;" v-if="!val.ismust">*</span>
                        <el-input size="medium" type="number" :disabled="certificationstatus != 2" :placeholder="'请填写'+val.fieldname" v-model="val.fieldvalue">
                            <span style="display: block;text-align: right;" slot="prepend">{{val.fieldname}}</span>
                        </el-input>
                    </li>
                </ul>
            </el-form-item>
            <el-button v-show="this.submitJson.templateFromList.length > 0" type="primary" @click="submit" :disabled="certificationstatus != 2" :loading="loading">提交</el-button>
            <el-form-item v-show="this.submitJson.templateFromList == 0">
                <h3>暂无数据</h3>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { getTemplateList } from "../../api/buscommodity/buscommodity.js";
    import {
        getCategory,
        getCommoditySublevelList,
        addOrUpdateCertification,
        certificationInfo
    } from "../../api/classification/classification.js";
    import { BASE_URL } from "../../config/app";
    const templateFromList = [
        {
            name: "",
            templateItemFormList: [
                {
                    fieldtype: "",
                    fieldname: "",
                    fieldvalue: ""
                }
            ]
        }
    ];
    export default {
        data() {
            return {
                query: {
                    //查询条件
                    parentid: null,
                    topcategoryname: "",
                    currentPage: 1,
                    pageSize: 1000,
                    level: 1
                },
                totalNumber: 0,
                submitJson: {
                    topCategoryId: null,
                    twoCategoryId: null,
                    threeCategoryId: null,
                    templateFromList: templateFromList,
                    goodsTemplateFormList: templateFromList
                },
                list: [
                    {
                        registrationNumber: "XDKKLJLKA7LKJK73498H",
                        userMobile: "18888888888",
                        userRegistTime: "2020/09/01",
                        accountStatus: 3
                    }
                ],
                category: [],
                busCommoditySecondaryCategoryList: [],
                busCommodityThirdCategoryList: [],
                loading: false,
                index: 0,
                uploadUrl:  BASE_URL + "/goldendays-currency/tool/uploadpro",//上传图片
                uploadData: [], //[{name:"12",url:"http://localhost/maotianxiaupload/common/2019-08-23/MH1566545692219_mid.jpg"}], // 图片data
                fileName: null,
                showImgName: false,
                certificationstatus: 2,
                type: null,
                certificationinfo:{}
            };
        },
        methods: {
            //一级
            topchange() {
                if (this.submitJson.topCategoryId == "") {
                    return false;
                }
                let data = {
                    topcategoryid: this.submitJson.topCategoryId
                };
                this.loading = true;
                getCommoditySublevelList(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        console.log(response);
                        this.busCommoditySecondaryCategoryList =
                            response.data || [];
                        this.submitJson.twoCategoryId = null;
                        this.submitJson.threeCategoryId = null;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            //二级
            secondchange() {
                if (this.submitJson.twoCategoryId == "") {
                    return false;
                }
                this.loading = true;
                console.log(this.submitJson);
                let data = {
                    topcategoryid: this.submitJson.twoCategoryId
                };
                getCommoditySublevelList(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        console.log(response);
                        this.busCommodityThirdCategoryList = response.data || [];
                        this.submitJson.threeCategoryId = null;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            threechange() {
                if (this.submitJson.threeCategoryId == "") {
                    return false;
                }
                this.loading = true;
                const formData = new FormData();
                formData.append("topCategoryId", this.submitJson.topCategoryId);
                formData.append("twoCategoryId", this.submitJson.twoCategoryId);
                formData.append("threeCategoryId", this.submitJson.threeCategoryId);
                getTemplateList(formData)
                    .then(response => {
                        console.log(response.data);
                        if (response.code) {
                            this.$message.error(response.message);
                            this.loading = false;
                        }
                        this.type = response.data.type;
                        if (response.data.type == 1) {
                            this.certificationstatus = 2;
                            this.submitJson.templateFromList =
                                response.data.templateFromList || [];
                            this.submitJson.goodsTemplateFormList =
                                response.data.goodsTemplateFormList || [];
                        } else {
                            this.certificationid =
                                response.data.certification.certificationid;
                            this.submitJson.templateFromList =
                                response.data.certification.certificationcontent ||
                                [];
                            let data =
                                response.data.certification.certificationcontent;
                            this.submitJson.templateFromList =
                                JSON.parse(data) || [];
                            this.certificationstatus =
                                response.data.certification.certificationstatus;
                            console.log(this.submitJson.templateFromList);
                        }
                        console.log(this.submitJson);
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(err => {
                        this.$message.error(err);
                        this.loading = false;
                    });
            },
            getCategory() {
                getCategory()
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        console.log(response);
                        this.totalNumber = 10;
                        this.category = response.data;
                        console.log();
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            certificationCheck() {
                certificationInfo()
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        console.info(response.data)
                        if(response.data != null){
                            this.certificationid =
                                response.data.certificationid;
                            this.submitJson.templateFromList =
                                response.data.certificationcontent ||
                                [];
                            let data =
                                response.data.certificationcontent;
                            this.submitJson.templateFromList =
                                JSON.parse(data) || [];
                            this.certificationstatus =
                                response.data.certificationstatus;
                            console.log(this.submitJson.templateFromList);
                            this.submitJson.topCategoryId= response.data.liveloneid;
                            let data1 = {
                                topcategoryid: this.submitJson.topCategoryId
                            };
                            getCommoditySublevelList(data1)
                                .then(response => {
                                    if (response.code != 0) {
                                        this.$message.error(response.message);
                                        return false;
                                    }
                                    this.busCommoditySecondaryCategoryList =
                                        response.data || [];
                                })
                                .catch(() => {
                                });
                            this.submitJson.twoCategoryId=response.data.livetwoeid;
                            let data2 = {
                                topcategoryid: this.submitJson.twoCategoryId
                            };
                            getCommoditySublevelList(data2)
                                .then(response => {
                                    if (response.code != 0) {
                                        this.$message.error(response.message);
                                        return false;
                                    }
                                    this.busCommodityThirdCategoryList = response.data || [];
                                })
                                .catch(() => {
                                });
                            this.submitJson.threeCategoryId=response.data.livelthreeid;
                        }

                    })
                    .catch(() => {
                    });
            },
            submit() {
                console.log(this.submitJson);
                console.log(this.submitJson.templateFromList);
                for (const key in this.submitJson.templateFromList) {
                    for (const i in this.submitJson.templateFromList[key]
                        .templateItemFormList) {
                        // this.submitJson.templateFromList[key].templateItemFormList[i].fieldvalue
                        if (
                            !this.submitJson.templateFromList[key]
                                .templateItemFormList[i].fieldvalue && !this.submitJson.templateFromList[key]
                                .templateItemFormList[i].ismust
                        ) {
                            this.$message.warning(
                                this.submitJson.templateFromList[key]
                                    .templateItemFormList[i].fieldname +
                                "不能为空！"
                            );
                            return false;
                        }
                    }
                }
                const data = {
                    categoryid: this.submitJson.threeCategoryId,
                    certificationcontent: JSON.stringify(
                        this.submitJson.templateFromList
                    ),
                    certificationid: this.type == 2 ? this.certificationid : null
                };
                this.loading = true;
                addOrUpdateCertification(data)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.$message.success("提交成功！");
                        this.certificationstatus = 1;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            // 图片上传
            handleChange(index, key, file) {
                console.log(file);
                this.fileName =
                    this.submitJson.templateFromList[index].templateItemFormList[
                        key
                        ].fieldname || "";
                return false;
            },
            //图片上传成功
            handleSuccess(index, key, response, file) {
                console.log(file);
                if (response.status === 1) {
                    const filePath = response.data;
                    this.submitJson.templateFromList[index].templateItemFormList[
                        key
                        ].fieldvalue = filePath;
                    console.log(this.submitJson.templateFromList);
                    this.showImgName = true;
                    return;
                }

                this.$message.error("上传文件报错");
            },
            // 移除图片
            handlePicRemove(index, key, file, fileList) {
                console.log(fileList);
                this.showImgName = false;
                this.submitJson.templateFromList[index].templateItemFormList[
                    key
                    ].fieldvalue = null;
                console.info(this.submitJson.templateFromList);
            }
        },
        filters: {
            statusFilter(status) {
                let statusFilter = "";
                switch (status) {
                    case 1:
                        statusFilter = "已驳回";
                        break;
                    case 2:
                        statusFilter = "已通过";
                        break;
                    case 3:
                        statusFilter = "审核中";
                        break;
                    default:
                        statusFilter = "审核中";
                        break;
                }
                return statusFilter;
            },
            becomeNumber(str) {
                return Number(str);
            }
        },
        created() {
            this.getCategory();
            this.certificationCheck();
        }
    };
</script>

<style scoped lang="scss">
    h3 {
        color: #606266;
        margin-bottom: 20px;
    }
    .projectType {
        max-width: 600px;
        margin-bottom: 20px;
        li{
            position: relative;
            padding-left: 10px;
        }
    }
    .imgBox {
        position: relative;
        overflow: hidden;
        .imgName {
            display: block;
            position: absolute;
            bottom: 0px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            width: 148px;
            z-index: 9;
            line-height: 24px;
            border-bottom-right-radius: 6px;
            border-bottom-left-radius: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>
